<script lang="ts" setup>
import { UserPassForm } from '@/api/user/types';
import { updateUserPassword } from '@/api/user';
import { useUserStoreHook } from '@/store/modules/user';

const formRef = ref(ElForm);
const oldPasswordRef = ref(ElInput);
const newPasswordRef = ref(ElInput);
const comPasswordRef = ref(ElInput);

const userStore = useUserStoreHook();

const stateData = reactive({
    formData: {
        id: userStore.userInfo.id
    } as UserPassForm,
    rules: {
        oldPassword: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
        newPassword: [
            {
                required: true,
                // message: '请输入新密码',
                trigger: 'blur',
                min: 6,
                max: 20,
                message: '请输入6-20位数数字和字母组合的密码'
            }
        ],
        comPassword: [
            {
                required: true,
                trigger: 'blur',
                min: 6,
                max: 20,
                validator: (rule: any, value: string, callback: any) => {
                    console.log(value, stateData.formData.newPassword);
                    if (stateData.formData.newPassword !== value) {
                        return callback(new Error('新密码和确认密码不一致'));
                    }
                    return callback();
                }
            }
        ]
    },
    newPasswordType: 'password',
    comPasswordType: 'password',
    oldPasswordType: 'password'
});

const {
    formData,
    rules,
    newPasswordType,
    comPasswordType,
    oldPasswordType
} = toRefs(stateData);
// const { validForm } = useFormValid(formRef);

async function handleSubmit() {
    formRef.value.validate((valid: boolean) => {
        if (valid) {
            updateUserPassword(stateData.formData)
                .then(res => {
                    ElMessage.success('修改成功，将自动退出登录！');
                    setTimeout(() => {
                        userStore.resetToken()
                    }, 2000)

                })
        } else {
            return false;
        }
    });
}

function showPwd(num: number) {
    // 显示密码
    if (num === 0) {
        if (oldPasswordType.value === 'password') {
            oldPasswordType.value = '';
        } else {
            oldPasswordType.value = 'password';
        }
        nextTick(() => {
            oldPasswordRef.value.focus();
        });
    } else if (num === 1) {
        if (newPasswordType.value === 'password') {
            newPasswordType.value = '';
        } else {
            newPasswordType.value = 'password';
        }
        nextTick(() => {
            newPasswordRef.value.focus();
        });
    } else {
        if (comPasswordType.value === 'password') {
            comPasswordType.value = '';
        } else {
            comPasswordType.value = 'password';
        }
        nextTick(() => {
            comPasswordRef.value.focus();
        });
    }
}
</script>

<template>
    <div class="app-container">
        <div class="form-box">
            <div class="form-box-inner">
                <el-form class="form-class" ref="formRef" :model="formData" :rules="rules" label-width="120px"
                    label-position="top" size="large">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item prop="oldPassword" label="原密码">
                                <el-input ref="oldPasswordRef" v-model.trim="formData.oldPassword" :key="oldPasswordType"
                                    :type="oldPasswordType" placeholder="请输入原密码" />
                                <span class="show-pwd" @click="showPwd(0)">
                                    <svg-icon :icon-class="oldPasswordType === 'password' ? 'eye' : 'eye-open'" />
                                </span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item prop="newPassword" label="新密码">
                                <el-input ref="newPasswordRef" v-model.trim="formData.newPassword" :key="newPasswordType"
                                    :type="newPasswordType" placeholder="请输入6-20位数字和字母组合作为新密码" />
                                <span class="show-pwd" @click="showPwd(1)">
                                    <svg-icon :icon-class="newPasswordType === 'password' ? 'eye' : 'eye-open'" />
                                </span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item prop="comPassword" label="确认密码">
                                <el-input ref="comPasswordRef" v-model.trim="formData.comPassword" :key="comPasswordType"
                                    :type="comPasswordType" placeholder="请再次输入新密码" />
                                <span class="show-pwd" @click="showPwd(2)">
                                    <svg-icon :icon-class="comPasswordType === 'password' ? 'eye' : 'eye-open'" />
                                </span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <div class="form-bottom">
                        <el-button class="sub-btn" type="primary" @click="handleSubmit">确认修改</el-button>
                        <!-- <el-button class="for-btn" @click="goEditPass">忘记密码</el-button> -->
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>
 
<style lang="scss" scoped></style>
  